<template>
  <div>
    <a-row :gutter="16">
      <a-col :span="4">
        <a-select v-model:value="selectedYear" style="width: 100%; margin-bottom: 10px;">
          <a-select-option v-for="year in yearOptions" :key="year" :value="year">
            {{ year }} 年
          </a-select-option>
        </a-select>
      </a-col>
      <a-col :span="18">
        <a-button @click="handleSaveDate"> 提交 </a-button>
      </a-col>
    </a-row>
  </div>

  <!-- 渲染12个月的日历 -->
  <a-row :gutter="[16, 16]">
    <a-col :span="6" v-for="month in 12" :key="month">
      <a-card>
        <a-calendar
            v-model:value="calendarValues[month - 1]"
            mode="month"
            :show-date="false"
            :fullscreen="false"
            :valid-range="getValidRange(month)"
            @select="(date) => onDateSelect(date, month)"
        >
          <template #headerRender="{value:current}">
            <div class="text-center bolder margin-bottom-10">{{toChineseMonth(month)}}</div>
          </template>
          <template #dateCellRender="{ current }">
            <div :class="getCellClass(current, month)">
              {{ current.date() }}
            </div>
          </template>
        </a-calendar>
      </a-card>

    </a-col>
  </a-row>
</template>


<script setup>
import { ref, computed, watchEffect } from 'vue';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';

dayjs.locale('zh-cn');

const selectedDates = ref([]); // 存储用户选中的日期
const currentYear = dayjs().year();

// 当前、明年、后年
const yearOptions = computed(() => {
  return [currentYear, currentYear + 1, currentYear + 2];
});

// 用户选择的年份，默认当前年份
const selectedYear = ref(currentYear);

const handleSaveDate = ()=>{
  console.log(selectedYear.value,selectedDates.value);
}

// 初始化每个月的日历值
const calendarValues = ref([]);

watchEffect(() => {
  calendarValues.value = Array.from({ length: 12 }, (_, i) =>
      dayjs(`${selectedYear.value}-${i + 1}`)
  );
  // 清空当前选中日期
  selectedDates.value = [];

  const dates = [];
  for (let month = 1; month <= 12; month++) {
    const daysInMonth = dayjs(`${selectedYear.value}-${month}-01`).daysInMonth();
    for (let day = 1; day <= daysInMonth; day++) {
      const date = dayjs(`${selectedYear.value}-${month}-${day}`);
      const dayOfWeek = date.day();
      if (dayOfWeek !== 0 && dayOfWeek !== 6) {
        // 修改格式为 yyyy-MM-DD
        dates.push(date.format('YYYY-MM-DD'));
      }
    }
  }

  selectedDates.value = dates;
});

const getCellClass = (current, calendarMonth) => {
  const currentMonth = current.month() + 1; // dayjs 的 month() 是从 0 开始的
  if (currentMonth !== calendarMonth) {
    return 'date-disabled';
  }
  return checkedDate(current) ? 'date-selected' : 'date-not-selected';
};


const checkedDate = (current) => {
  const date = current.format('YYYY-MM-DD');
  return selectedDates.value.includes(date);
};


const onDateSelect = (current, month) => {
  const date = current.format('YYYY-MM-DD');
  const index = selectedDates.value.indexOf(date);

  if (index === -1) {
    selectedDates.value.push(date);
  } else {
    selectedDates.value.splice(index, 1);
  }

};



const getValidRange = (month) => {
  const year = selectedYear.value;
  const start = dayjs(`${year}-${month}-01`);
  const end = start.endOf('month');
  console.log(start,end);
  return [start, end];
};
const toChineseMonth = (monthNumber) => {
  const chineseMonths = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
  return chineseMonths[monthNumber - 1];
};

</script>

<style scoped>
/* 自定义选中日期的样式 */
.date-selected {
  background-color: #1677FF; /* 高亮背景色 */
  border: 1px solid #1677ff;
  color: white;
  border-radius: 4px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.date-not-selected {
  background-color: white; /* 高亮背景色 */
  color: rgba(0, 0, 0, 0.88);
  border-radius: 50%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 4px;
}

.date-disabled {
  color: rgba(0, 0, 0, 0.25); /* 置灰 */
  pointer-events: none;      /* 可选：禁用点击 */
  background-color: transparent;
}


/* 完全隐藏 a-calendar 默认选中样式 */
:deep(.ant-picker-calendar-selected-day .ant-picker-calendar-date),
:deep(.ant-picker-calendar-today .ant-picker-calendar-date) {
  background-color: transparent !important;
  border: none !important;
}

:deep(.ant-picker-calendar-date-value) {
  display: none;
}

</style>